<template>
    <div class="login">

        <div class="form">
            <div class="titile">
                <span>麟</span>
                <span>芯</span>
                <span>测</span>
                <span>试</span>
                <span>云</span>
                <span>平</span>
                <span>台</span>
            </div>

            <div class="form__tabs">
                <div class="form__tabpane" :class="{ 'form__tabpane2': currentTab === 0 }" @click="changeTab(0)">
                    <span>登录</span>
                    <div class="form__tabpane__line" v-show="currentTab === 0"></div>
                </div>
                <div class="form__tabpane" :class="{ 'form__tabpane2': currentTab === 1 }" @click="changeTab(1)">
                    <span>注册</span>
                    <div class="form__tabpane__line" v-show="currentTab === 1"></div>

                </div>
            </div>


            <!-- 登录框 -->
            <div class="form__login" v-show="currentTab === 0">
                <Form class="space-y-4 form__login__box" layout="vertical" :model="formModel">
                    <Form.Item label="">
                        <!-- <div class="form__login__title">Login</div> -->

                    </Form.Item>
                    <Form.Item label="账号">
                        <div class="form__input-box">
                            <img class="form__icon" src="../assets/images/phone-icon.png" alt="" srcset="">
                            <Input v-model:value="formModel.identifier" class="text-sm py-2!" placeholder="请输入账号" />
                        </div>
                    </Form.Item>
                    <Form.Item label="密码">
                        <div class="form__input-box">
                            <img class="form__icon" src="../assets/images/password-icon.png" alt="" srcset="">
                            <Input.Password v-model:value="formModel.credential" class="text-sm py-2! px-2!"
                                placeholder="请输入密码" />
                        </div>

                    </Form.Item>
                    <Form.Item>
                        <Button class="form__login__btn" type="primary"
                            @click="checkIdentifierType(), post({ ...formModel }).execute()">登录</Button>
                    </Form.Item>
                </Form>
            </div>

            <!-- 注册框 -->
            <div class="form__login" v-show="currentTab === 1">
                <Form class="space-y-4 form__login__box" layout="vertical" :model="registformModel">
                    <Form.Item label="用户名">
                        <div class="form__input-box">
                            <img class="form__icon" src="../assets/images/code-icon.png" alt="" srcset="">
                            <Input v-model:value="registformModel.username" class="text-sm py-2!" placeholder="请设置用户名" />
                        </div>
                    </Form.Item>
                    <Form.Item label="账号">
                        <div class="form__input-box">
                            <img class="form__icon" src="../assets/images/phone-icon.png" alt="" srcset="">
                            <Input v-model:value="registformModel.identifier" class="text-sm py-2!" placeholder="请设置手机号/邮箱" />
                        </div>
                    </Form.Item>
                    <Form.Item label="密码">
                        <div class="form__input-box">
                            <img class="form__icon" src="../assets/images/password-icon.png" alt="" srcset="">
                            <Input.Password v-model:value="registformModel.credential" class="text-sm py-1.5!"
                                placeholder="请设置密码" suffix="visible ? 'eye-invisible' : 'eye'"/>
                        </div>

                    </Form.Item>
                    <Form.Item>
                        <Button class="form__login__btn" type="primary" @click="addAccount">注册</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Button, Form, Input, message } from 'ant-design-vue'
import type { AfterFetchContext } from '@vueuse/core'
import type { IBasic } from '~/types/apis/basic'

const router = useRouter()
const globalConfigStore = useGlobalConfigStore()

const formModel = reactive({
    identifier: '',
    credential: '',
    identityType: 'phone',
})

const registformModel = reactive({
    identifier: '',
    credential: '',
    username: '',
    identityType: 'phone',
})


const currentTab = ref(0)

const changeTab = (index: number) => {
    currentTab.value = index
}

const { post } = useCustomFetch(`/account-service/api/v1/account/login`, {
    immediate: false,
    afterFetch(ctx: AfterFetchContext<IBasic<any>>) {
        if (ctx.data && ctx.data.code === 0) {
            message.success('登录成功')
            globalConfigStore.setLoginToken(ctx.data.data.tokenValue as string)
            router.push('/home')
            // permissionStore.fetchUserRole()
        }
        return ctx
    },
})

const checkIdentifierType = () => {
    const isPhone = /^1[3-9]\d{9}$/.test(formModel.identifier)
    formModel.identityType = isPhone ? 'phone' : 'mail'
}

const addAccount = async () => {
    if (
        registformModel.identifier.trim() === '' ||
        registformModel.credential.trim() === ''
    ) {
        message.error('用户名和密码不能为空')
        return
    }

    const { isValid, identityType } = validateIdentifier(registformModel.identifier)
    if (isValid) {
        registformModel.identityType = identityType
        await registAccount(registformModel).execute()
    } else {
        message.error('账号格式不正确，请输入有效的手机号或邮箱')
    }
}

const validateIdentifier = (identifier: string) => {
    const phoneRegExp = /^1\d{10}$/
    const emailRegExp = /^\w+([+.-]\w+)*@\w+([.-]\w+)*\.\w+([.-]\w+)*$/
    return {
        isValid: phoneRegExp.test(identifier) || emailRegExp.test(identifier),
        identityType: emailRegExp.test(identifier) ? 'mail' : 'phone',
    }
}

const { post: registAccount } = useCustomFetch(`/account-service/api/v1/account/register`, {
    immediate: false,
    afterFetch(ctx: AfterFetchContext<IBasic<any>>) {
        if (ctx.data && ctx.data.code === 0) {
            registformModel.identifier = ''
            registformModel.credential = ''
            registformModel.username = ''
            currentTab.value = 0
            message.success('注册成功')
        }
        return ctx
    },
})
</script>

<style scoped lang="less">
:deep(.ant-form-item .ant-form-item-label>label) {
    font-size: 18px;
    color: #777C92;
    line-height: 20px;
}

.ant-input {
    background: transparent !important;
    border: none;
    border-left: 1px solid #bebebe;
    border-radius: 0;
    color: #bebebe;
}

/* 覆盖聚焦时的边框颜色 */
:deep(.ant-input:focus) {
    border-color: transparent;
    /* 将transparent替换成你想要的颜色 */
    border-left: 1px solid #bebebe;
    box-shadow: 0 0 0 0 transparent;
    /* 可能需要调整或去除 */
}

:deep(.ant-input-affix-wrapper) {
    background: transparent !important;
    border: none;
    border-left: 1px solid #bebebe;
    border-radius: 0;
    color: #bebebe;
}

:deep(.ant-input-wrapper .ant-input:focus) {
    border-color: transparent !important;
    /* 替换成你想要的颜色 */
    box-shadow: 0 0 0 0 transparent !important;
    /* 可能需要调整或去除 */
}

:deep(.ant-input-affix-wrapper .ant-input:focus) {
    border: none;
    box-shadow: none;
}

.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused {
    box-shadow: none;
}

.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
    border-color: #bebebe;
}

:deep(.ant-input-affix-wrapper .anticon.ant-input-password-icon) {
    color: #FFFFFF;
}

.titile {
    font-size: 34px;
    letter-spacing: 4px;
    margin-left: -15px;

    span {
        display: inline-block;
        background-color: transparent;
        background-image: linear-gradient(to right, #6C2CD5, #48299D);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        // font-weight: 600;
    }
}

.login {
    width: 100%;
    height: 100vh;
    background-image: url('../assets/images/login-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
}

.form {
    width: 625px;
    height: 600px;
    background-image: url('../assets/images/login-form.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* background-position: center; */
    margin-right: 129px;
    padding: 20px 70px;

    &__input-box {
        width: 100%;
        height: 56px;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #bebebe;
        display: flex;
        align-items: center;
        padding-right: 10px;
    }

    &__icon {
        width: 22px;
        height: 22px;
        margin: 0 22px;
    }

    &__tabs {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 32px;
    }

    &__tabpane {
        width: 52px;
        height: 45px;
        font-weight: 500;
        font-size: 23px;
        color: #BBBBBB;
        line-height: 30px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;

        &__line {
            width: 23px;
            height: 2px;
            background: #6F8DE9;
            border-radius: 40px 40px 40px 40px;
            // margin-top: 10px;
        }
    }

    &__tabpane2 {
        color: #FFFFFF !important;
    }

    &__tabpane:last-child {
        margin-left: 116px;
    }

    &__login {
        margin-top: 20px;

        &__title {
            font-weight: 500;
            font-size: 36px;
            color: #FFFFFF;
            margin-bottom: 20px;
            margin-top: 10px;
        }

        &__box {
            // margin-top: 28px;
        }

        &__btn {
            width: 100%;
            height: 46px;
            font-size: 20px;
            margin-top: 30px;
        }
    }


}
</style>